<template>
  <view class="settle-container">
    <!-- 全选 -->
    <label class="radio">
      <radio color="#c00000" :checked="isAll" @click="clickAll" /><text>全选</text>
    </label>
    <!-- 合计 -->
    <view class="totaPrice">
      合计：<text>￥{{ priceAll }}</text>
    </view>
    <!-- 结算按钮 -->
    <button class="buttonOk" @click="settleClick">结算<text>({{ goodsStateCount }})</text></button>
  </view>
</template>

<script>
  import { mapGetters ,mapMutations,mapState} from 'vuex'
  export default {
    name:"my-settle",
    data() {
      return {
        
      };
    },
    computed:{
      ...mapGetters('cart',['goodsStateCount','isAll','priceAll']),
      ...mapGetters(['shippingAddress']),
      ...mapState('user',['token']),
      ...mapState('cart',['cart'])
    },
    methods:{
      ...mapMutations('cart',['UPDATEALL']),
      // 全选反选
      clickAll() {
        this.UPDATEALL(!this.isAll)
      },
      // 点击结算
      settleClick() {
        let n = 3
        if(!this.goodsStateCount) return uni.$showMsg('请勾选您要结算的商品')
        if(!this.shippingAddress) return uni.$showMsg('请选择收货地址')
        if(!this.token) {
         let timer =  setInterval(() => {
             n--
           uni.showToast({
             icon:'none',
             title:'请登录后结算'+n+'秒后跳转登录页'
           })
           if(n <= 0) {
             clearInterval(timer)
             uni.switchTab({
               url:'../../pages/my/my'
             })
           }
           console.log('oo');
           },1000)
        }else {
          // 有token
          this.payOrder()
        }
      },
     async payOrder() {
        // 创建订单
        const orderInfo = {
          // order_price:this.priceAll
          order_price:0.01,
          consignee_addr:this.shippingAddress,
          goods:this.cart.filter(item => item.goods_state).map(obj => ({
            goods_id:obj.goods_id,
            goods_number:obj.goods_count,
            goods_price:obj.goods_price
          }))
        }
        // 发情请求创建订单
     const { data } = await uni.$http.post('/my/orders/create',orderInfo)
     if(data.meta.status !== 200) return uni.$showMsg('创建订单失败')
     // 得到订单编号
     const orderNumber = data.message.order_number
     // console.log(orderNumber);
     // 订单预支付
     const { data:res } = await uni.$http.post('/my/orders/req_unifiedorder',{ order_number:orderNumber })
     // console.log(res);
     if(res.meta.status !== 200) return uni.$showMsg('预付订单生成失败')
     const payInfo = res.message.pay
     console.log(payInfo);
     // 调用微信支付接口
     const [err,succ] = await uni.requestPayment(payInfo);
     console.log(err,succ);
     if(err) return uni.$showMsg('订单未支付')
     const { data:res2} = await uni.$http.post('/my/orders/chkOrder',{ order_number:orderNumber })
     console.log(res2);
     if(res2.meta.status !== 200) return uni.$showMsg('订单未支付')
     uni.showToast({
       icon:'success',
       title:'支付完成'
     })
      }
    }
  }
</script>

<style lang="scss">
.settle-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  padding: 0 10px;
  background-color: #fff;
  border-top: 1px solid #efefef;
  .totaPrice {
    margin-left: 40px;
    text {
      font-size: 15px;
      color: #C00000;
    }
  }
  .buttonOk {
    display: block;
    width: 100px;
    height: 40px;
    line-height: 40px;
    border: none;
    border-radius: 0%;
    color: #fff;
    font-size: 15px;
    background-color: #C00000;
    margin: 0 20rpx 0 0;
  }
}
</style>